<template lang="html">
  <div class="xtx-checkbox" @click="changeChecked()">
    <i v-if="checked" class="iconfont icon-checked"/>
    <i v-else class="iconfont icon-unchecked"/>
    <template v-if="$slots.default">
      <span><slot/></span>
    </template>
  </div>
</template>

<script>
import {useVModel} from '@vueuse/core'

export default {
  name: 'XtxCheckBox',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  setup(props, {emit}) {
    // checked的值改变时，通知父组件
    const checked = useVModel(props, 'modelValue', emit) // props.modelValue
    const changeChecked = () => {
      checked.value = !checked.value
      // 订阅消息 @change(vue自带)，发布时传给订阅者newVal参数

    }

    // watch(checked, () => {
    //     checked.value = props.modelValue
    // }, {immediate: true})

    return {
      checked,
      changeChecked,
    }
  }
}
</script>

<style scoped lang="less">
.xtx-checkbox {
  display: inline-block;
  margin-right: 2px;

  .icon-checked {
    color: @xtxColor;

    ~ span {
      color: @xtxColor;
    }
  }

  input {
    position: relative;
    top: 1px;
  }

  span {
    margin-left: 2px;
  }
}
</style>